import React, { useState, useEffect } from "react";
import { Select, Radio, Form, Row, Col, Input, Button, Table } from "antd";
import "antd/dist/antd.css";
import fetchDataFormServer from "./fetchDataFormServer";
import "./index.css";

const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "性别",
    dataIndex: "gender",
    key: "gender",
    render: (text) => {
      if (text === "male") return "男";
      return "女";
    },
  },
  {
    title: "是否接触过前端",
    dataIndex: "fe",
    key: "fe",
    render: (text) => {
      if (text === 0) return "否";
      return "是";
    },
  },
];

const SearchForm = () => {
    const [form] = Form.useForm();
    const [value, setValue] = useState();
    const [dataSource, setDataSource] = useState([]);
  
    const getDatasource = async (query = {}) => {
      // 模拟从服务端获取数据
      // 这里已经实现好了，你只需要完成下面这行之后的逻辑
      return await fetchDataFormServer(query);
    };
  
    const onChange = (e) => {
      setValue(e.target.value);
    };
  
    useEffect(() => {
      getDatasource();
    }, []);
  
    const onSearch = (query) => {
      getDatasource(query).then(resp => {
        setDataSource(resp);
      })
    };
  
    return (
      <>
        <Form
          form={form}
          name="advanced_search"
          className="ant-advanced-search-form"
          onFinish={onSearch}
        >
          <Row gutter={24}>
            <Col span={8}>
              <Form.Item name="name" label="姓名">
                <Input />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="gender" label="性别">
                <Select allowClear>
                  <Select.Option value="male">男</Select.Option>
                  <Select.Option value="female">女</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="fe" label="是否接触过前端">
                <Radio.Group onChange={onChange} value={value}>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col
              span={24}
              style={{
                textAlign: 'right',
              }}
            >
              <Button type="primary" htmlType="submit">
                搜索
              </Button>
              <Button
                style={{
                  margin: '0 8px',
                }}
                onClick={() => {
                  form.resetFields();
                }}
              >
                重置
              </Button>
            </Col>
          </Row>
        </Form>
        <Table dataSource={dataSource} columns={columns} />
      </>
    );
  };

  export default SearchForm;